﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>商品评论</title>

    <link rel="stylesheet" href="Threelinkage/layui/css/layui.css">
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="Threelinkage/layui/layui.js" async></script>
    
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    <script type="text/javascript" async>
        var ind=-1;
        var isClick=false;
        function dorank(level) {
            ind=level;
            isClick=true;
            $("#Level").val(level);
            $('#rattingError').hide();
        }
        function RatingMouseLeave(index) {
            Rating(ind);
            if (!isClick){
                $('.pinglun:eq('+(index-1)+') p').hide();
                $('.pinglun:eq(3) p').hide();
            }
        }
        function RatingMouseOver(index) {
            Rating(index);
        }
        function Rating(index) {
            for(var i=0; i<$('.pinglun span').length;i++){
                          var  span=$('.pinglun span')[i];
                          if  (i<index){
                              span.style.color="yellow";
                          }else{
                              span.style.color="lightgray";
                          }
                          $('.pinglun:eq('+i+') p').hide();
                       }
            $('.pinglun:eq('+(index-1)+') p').show();
        }
        
        $(function () {
            $('.pinglun p').css('display','none');
            $('#content').keydown(function () {
                var value=$('#content').val();
                if(value.length>1000){
                    return false;
                }
            }).change(function () {
                $('#sy').html($('#content').val().length);
                if($('#content').val().length>1000){
                   var value= $('#content').val();
                   if(value>1000){
                    $('#content').val(value.substring(0,1000));
                   }
                }
                $('#btn_Sub').focus();
            })
        })
    </script>
    
    <style type="text/css">
        #goodHead{
            margin-left: 2%;
            line-height: 28px;
        }
        .pinglun{
            cursor: pointer;
        }
        .pinglun span{
            font-size: 200%;
            color: lightgray;
        }
        #goodName{
            font-size: 22px;
            letter-spacing: 2px;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="layui-row layui-bg-cyan">
        <div class="layui-col-md3" id="goodHead">
             <h3>商品评分</h3>
        </div>
    </div>
    <br />
    <br />
    <div class="layui-row">
        <div class="layui-col-md8">
            <div class="layui-row">
                <div class="layui-col-md3">
                <img src="./images/test.jpg" height="76px">
                </div>
                <div class="layui-col-md6"><span id="goodName">路上云雾茶</span></div>
            </div>
        </div>
    </div>
    <br />
    <div class="layui-row">
        <div class="layui-col-md3">
            <div class="layui-row">
                <p class="layui-col-md-offset1">请直接点击相应的星级进行评分</p>
            </div>
        </div>
    </div>
    <br />
    <div class="layui-row">
        <div class="layui-col-md6">
            <div class="layui-row">
                <ul class="layui-col-md-offset2">
                    <li class="layui-col-md2 pinglun" onclick="dorank(1)"
                        onmouseover="RatingMouseOver(1)" onmouseleave="RatingMouseLeave(1)">
                        <span class="layui-icon">&#xe658;</span>
                        <p>1分</p>
                        <p>很不满意</p>
                    </li>
                    <li class="layui-col-md2 pinglun" onclick="dorank(2)"
                        onmouseover="RatingMouseOver(2)" onmouseleave="RatingMouseLeave(2)">
                        <span class="layui-icon">&#xe658;</span>
                        <p>2分</p>
                        <p>不满意</p>
                    </li>
                    <li class="layui-col-md2 pinglun" onclick="dorank(3)"
                        onmouseover="RatingMouseOver(3)" onmouseleave="RatingMouseLeave(3)">
                        <span class="layui-icon">&#xe658;</span>
                        <p>3分</p>
                        <p>一般</p>
                    </li>
                    <li class="layui-col-md2 pinglun" onclick="dorank(4)"
                        onmouseover="RatingMouseOver(4)" onmouseleave="RatingMouseLeave(4)">
                        <span class="layui-icon">&#xe658;</span>
                        <p>4分</p>
                        <p>满意</p>
                    </li>
                    <li class="layui-col-md2 pinglun" onclick="dorank(5)"
                        onmouseover="RatingMouseOver(5)" onmouseleave="RatingMouseLeave(5)">
                        <span class="layui-icon">&#xe658;</span>
                        <p>5分</p>
                        <p>非常满意</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <br />
    <br />
    <br />
    <br />
    <div class="layui-row">
        <form action="#" id="ratFrom" class="layui-form">
            <input type="hidden" name="GoodId" value="">
            <input type="hidden" name="UserId" value="">
            <input type="hidden" name="OrderId" value="">
            
            <input type="hidden" name="Level" id="Level" value="">
            <!--上传图片-->
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
              <legend>选择图片</legend>
            </fieldset>
            <div class="layui-upload">
              <button type="button" class="layui-btn" id="upLoadImg">上传图片</button>
              <div class="layui-upload-list">
                <img class="layui-upload-img" id="demo1" height="87px">
                <p id="demoText"></p>
              </div>
            </div>
            
            <div class="layui-form-item layui-form-text">
              <label class="layui-form-label">评论内容</label>
              <div class="layui-input-block">
                <textarea name="Content" id="Content" placeholder="请输入内容" class="layui-textarea"></textarea>
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
        </form>
    </div>
    
</div>



<script type="text/javascript">
    //Demo
      layui.use('form', function(){
        var form = layui.form;
        
        //监听提交
        form.on('submit(formDemo)', function(data){
          if($('#Level').val()>5||$('#Level').val()<1){
              layer.msg("请您为我们点亮星星")
              return false  ;
          }
          if($('#Content').val().length>500){
              layer.msg("您输入的评论内容过长");
              $('#Content').val($('#Content').val().substring(0,500));
            return false;
          }
          if($('#Content').val().length<5){
              layer.msg("输入的评论内容太短了");
            return false;
          }
         var json= JSON.stringify(data.field);
          $.ajax({
            type:"post",
              url:"",
              dataType:"json",
              data:json,
              success:function (Res) {
              
              },error:function () {
              
              }
          })
        });
    });
    
    layui.use('upload', function(){
        var $ = layui.jquery
        ,upload = layui.upload;
        
        //普通图片上传
        var uploadInst = upload.render({
          elem: '#upLoadImg'
          ,url: '#' //上传文件路径
          ,before: function(obj){
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
              $('#demo1').attr('src', result); //图片链接（base64）
            });
          }
          ,done: function(res){
            //如果上传失败
            if(res.code > 0){
              return layer.msg('上传失败');
            }
            //上传成功
          }
          ,error: function(){
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function(){
              uploadInst.upload();
            });
          }
            ,size: 1024
        });
      });
      
      
</script>
</body>
</html>